<template>
  <div class="cart">
    <car-nav class="carnav">
      <template #center>
        <h3>购物车({{ bardge }})</h3>
      </template>
    </car-nav>
    <car-bs class="carbs">
      <CarItem v-for="item in goodslist" :key="item.iid" :item="item"></CarItem>
    </car-bs>
    <car-order class="order"></car-order>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'

import CarNav from 'comps/common/navbar/NavBar.vue'
import CarOrder from './comps/CarOrder'
import CarItem from './comps/CardItem'
import CarBs from 'comps/common/bscroll/BsCroll.vue'
export default {
  name: 'Car',
  components: {
    CarNav,
    CarOrder,
    CarItem,
    CarBs
  },
  setup() {
    const store = useStore()
    const bardge = computed(() => {
      return store.getters['car/goodsnum']
    })
    const goodslist = computed(() => {
      return store.state.car.goodslist
    })

    return {
      bardge,
      goodslist
    }
  }
}
</script>

<style lang="less" scoped>
@color: #fff;
.carnav {
  background-color: var(--color-tint);
  color: @color;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9999;
}
.order {
  margin-bottom: 49px;
}
.carbs {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 99px;
  overflow: hidden;
}
</style>
